import { Form, Grid } from '@arco-design/web-react';
import { ReactNode } from 'react';
const Col = Grid.Col;
const Item = Form.Item;
const labelCol = 8;
interface Props {
  label: string;
  children?: ReactNode;
  tips?: string;
  error?: string;
  /**  占位 默认1 代表一行四个位中的一位 */
  outlet?: 1 | 2 | 4;
  labelSpan?: number;
  offset?: number;
  required?: boolean;
  labelAlign?: 'left' | 'right';
}
/**
 * 详情中每一项字段的展示
 * @params label 字段标题
 * @params error ?错误提示
 * @params children 字段展示及编辑组件
 * @params outlet 占位 默认1 代表一行四个位中的一位
 */
export default function DetailItem({
  label,
  children,
  labelAlign = 'right',
  outlet = 1,
  labelSpan,
  offset,
  error,
  tips,
  required = false,
}: Props) {
  let _labelCol = labelSpan || Math.floor(labelCol / outlet);
  return (
    <Col span={6 * outlet - (offset ?? 0) * 2} offset={offset}>
      <Item
        labelAlign={labelAlign}
        required={required}
        validateStatus={error ? 'error' : undefined}
        className="text-second-color"
        label={label}
        labelCol={{ span: _labelCol }}
        wrapperCol={{ span: 24 - _labelCol }}
      >
        <div className="float-error-block">
          {children}
          {(tips || error) && <div className="float-error">{error ?? tips}</div>}
        </div>
      </Item>
    </Col>
  );
}
